import 'package:flutter/material.dart';
void main() {
  runApp(new TabbedAppBarSample());
}

List tabList = ['综合', '女装', '母婴儿童', '内衣', '居家', '男装'];
class Choice {
  final String title;
  final int id;
  const Choice({ this.title, this.id });
}

const List<Choice> choices = const <Choice>[
  const Choice(title: '综合', id: 1),
  const Choice(title: '女装', id: 1),
  const Choice(title: '母婴儿童', id: 1),
  const Choice(title: '内衣', id: 1),
  const Choice(title: '居家', id: 1),
  const Choice(title: '男装', id: 1),
  const Choice(title: '鞋子', id: 1),
  const Choice(title: '箱包', id: 1),
  const Choice(title: '美妆', id: 1),
];
class TabbedAppBarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: choices.length,
        child: new Scaffold(
          appBar: new AppBar(
            elevation: 0,
            // title: _widget_barSearch(),
          ),
          body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                // _widget_menu_card(),
                SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    child: SliverAppBar(
                      backgroundColor: Colors.white,
                      pinned: true, // 是否固定头部导航栏
                      forceElevated: innerBoxIsScrolled,
                      title: Container(
                        alignment: Alignment.center,
                        width: 600.0,
                        height: 40.0,
                        color: Colors.red,
                        child: Row(
                          children: [
                            Expanded(
                              child: Opacity(
                                opacity: 0.2,
                                child: Container(
                                  width: 500.0,
                                  height: 35.0,
                                  decoration: BoxDecoration(
                                    color: Colors.black,
                                    borderRadius: BorderRadius.all(Radius.circular(4.0))
                                  ),
                                  // child: ,
                                  // decoration: new BoxDecoration(backgroundColor: Colors.red)
                                ),
                              )
                            ),
                            Icon(
                              Icons.notifications,
                              color: Colors.white,
                            ),
                          ]
                        )
                      ),
                      bottom: TabBar(
                        isScrollable: true,
                        unselectedLabelColor: Colors.black,
                        labelColor: Colors.red,
                        indicatorColor: Colors.red,
                        // indicatorPadding: new EdgeInsets.only(bottom: 300.0),
                        tabs: choices.map((Choice choice) {
                          return new Tab(
                            text: choice.title,
                          );
                        }).toList(),
                      ),
                    )),
              ];
            },
            body: new TabBarView(
              children: choices.map((Choice choice) {
                return new Padding(
                  padding: const EdgeInsets.fromLTRB(0, 80.0, 0, 0),
                  child: new ChoiceCard(choice: choice),
                );
              }).toList(),
            ),
        )
        ),
      ),
    );
  }
}


class ChoiceCard extends StatelessWidget {
  const ChoiceCard({ Key key, this.choice }) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return new Card(
      color: Colors.white,
      child: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Text(choice.title, style: textStyle),
          ],
        ),
      ),
    );
  }
}

